<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>需求详情</title>  
    <link rel="stylesheet" href="../libs/mui/mui.css" />
	<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/main.css"/>
	<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
	<style>				
		/*图片*/
		.mui-content{font-size: 16px;}
		.mui-table-view .mui-media-object {max-width: 40px;height: 40px;border-radius: 100px;}
		.mui-media-body{line-height: 45px;}
		.Details label{width: 30%;display: block;float: left;line-height: 60px;}
		.Details img{width: 60px;height: 60px;}	
		.xix span{width: 70%;float: left;}
		.xix label{color: #AAAAAA;width: 30%;display: block;float: left;}
		b{color: red;}
		/*底部*/
		.mui-bar-tab .mui-tab-item.mui-active{color: #e3393c !important;}			
		.mui-bar-tab div a:nth-child(1){display: block;text-align: center;line-height: 30px;height: 50px;background: white;}
		.mui-bar-tab div a:nth-child(1) h5{margin: 0;color: #338efc;line-height: 50px;}			
		.mui-bar-tab div:nth-child(2) span{background: #2875f5;color: white;line-height: 30px;}
		.wid30{font-size: 17px;width: 100%;display: inline-block;padding: 12px 0;text-align: center;height: 50px;}
		.yonghuo{display: none;}
		.benren{display: none;} 
		.zhuangtai1{display: none;}
		.zhuangtai2{display: none;}
		.zhuangtai3{display: none;}
		.campus_pic img{margin-right: 2px;}
		.campus_tit{display: none;}
	</style>
</head>
<body>	
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">需求详情</h1>
	    <a href="#picture" class="mui-pull-right mui-icon">
	    	<i class="iconfont Siez1">&#xe612;</i>
	    </a>
	</header>
	<!--待接单的任务-->
	<nav class="mui-bar mui-bar-tab campus_tit">
		<div  class="mui-col-xs-12 mui-pull-left quxiao">
			<a class="order2">
				<span class="wid30">取消任务</span>
			</a>
		</div>
	</nav>
	<!--进行中的任务-->
	<nav class="mui-bar mui-bar-tab campus_tit">
		<div class="mui-col-xs-4 mui-pull-left">
			<a class="letter">
				<h5>私信</h5>
			</a>
		</div>
		<div  class="mui-col-xs-4 mui-pull-left quxiao">
			<a class="order">
				<span class="wid30">取消任务</span>
			</a>
		</div>
		<div  class="mui-col-xs-4 mui-pull-left operation">
			<a class="order">
				<span class="wid30">完成任务</span>
			</a>
		</div>
	</nav>
	<!--已完成任务-->
	<nav class="mui-bar mui-bar-tab campus_tit">
		<div class="mui-col-xs-5 mui-pull-left">
			<a class="letter">
				<h5>私信</h5>
			</a>
		</div>
		<div  class="mui-col-xs-7 mui-pull-left">
			<a class="order">
				<span class="wid30">已完成</span>
			</a>
		</div>
	</nav>
	<!--已取消的自己发布任务-->
	<nav class="mui-bar mui-bar-tab campus_tit">
		<div  class="mui-col-xs-12 mui-pull-left">
			<a class="order2">
				<span class="wid30">已取消</span>
			</a>
		</div>
	</nav>
	<!--接单人取消的订单-->
	<nav class="mui-bar mui-bar-tab campus_tit">
		<div class="mui-col-xs-5 mui-pull-left">
			<a class="letter">
				<h5>私信</h5>
			</a>
		</div>
		<div  class="mui-col-xs-7 mui-pull-left">
			<a class="order">
				<span class="wid30">已取消</span>
			</a>
		</div>
	</nav>
	<div class="mui-content">
		<div class="Campus">
			<ul class="mui-table-view zhuangtai1">
				<li class="mui-table-view-cell" style="padding: 6px 15px;">
					<img class="mui-media-object touxiang mui-pull-left" src="">
					<div class="mui-media-body">
						<span class="member_naem"></span>							
						<span class="mui-pull-right mui-h6 campus_time"></span>							
					</div>
				</li>
			</ul>
			<ul class="mui-table-view zhuangtai2">
				<li class="mui-table-view-cell">
					待接单
				</li>
			</ul>
			<ul class="mui-table-view zhuangtai3">
				<li class="mui-table-view-cell">
					未接单 已取消
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>主  题：</label>
					<span class="campus_title"></span>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>服务时间：</label>
					<span class="campus_datatime"></span>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>服务报酬：</label>
					<b class="campus_price"></b>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>地  点：</label>
					<span class="campus_address"></span>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>联 系 人：</label>
					<span class="campus_lxr"></span>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>联系电话：</label>
					<span class="campus_tel"></span>
				</li>
			</ul>
			<ul class="mui-table-view xix">
				<li class="mui-table-view-cell">
					<label>详细需求：</label>
					<span class="campus_xq"></span>
				</li>
			</ul>
			<ul class="mui-table-view Details">
				<li class="mui-table-view-cell">
					<label class="gray">图 片：</label>
					<div class="campus_pic">
						
					</div>
				</li>
			</ul>
		</div>
	</div>		
	<!--分享-->
	<div id="picture" class="brand-share mui-popover mui-popover-action mui-popover-bottom" style="height: 100px;">
		<ul class="background table-view">
			<li><i class="iconfont lvs weixin">&#xe609;</i>
				<span>微信</span>
			</li>
			<li><i class="iconfont ify4 qq">&#xe658;</i>
				<span>QQ好友</span>
			</li>
			<li><i class="iconfont lvs friends">&#xe65f;</i>
				<span>朋友圈</span>
			</li>
			<li><i class="iconfont ify3 micro-blog">&#xe661;</i>
				<span>微博</span>
			</li>
		</ul>		
	</div>
</body>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/function.js"></script>
<script type="text/javascript" src="../js/open.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script type="text/javascript" src="../js/web_js/public.js"></script>
<script type="text/javascript" src="../js/web_js/mycampus_details.js"></script>
<script type="text/javascript" src="../js/web_js/share.js" ></script>
<script>
	mui.previewImage();
</script>
<script>
	//跳转私信
	$(".letter").on('tap',function(){
		openNewPage('Chat.html');
	})
</script>
</html>